{% extends 'migration_app/dashboard_base.html' %}

{% block title %}帮助文档 - Oracle到PolarDB-PG迁移平台{% endblock %}

{% block dashboard_content %}
<div class="container">
    <div class="row">
        <!-- 左侧导航 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-book me-2"></i>文档目录
                </div>
                <div class="list-group list-group-flush">
                    <a href="#overview" class="list-group-item list-group-item-action" data-bs-toggle="list">
                        <i class="fas fa-info-circle me-2"></i>概述
                    </a>
                    <a href="#getting-started" class="list-group-item list-group-item-action" data-bs-toggle="list">
                        <i class="fas fa-play me-2"></i>快速开始
                    </a>
                    <a href="#database-connection" class="list-group-item list-group-item-action" data-bs-toggle="list">
                        <i class="fas fa-database me-2"></i>数据库连接
                    </a>
                    <a href="#migration-tasks" class="list-group-item list-group-item-action" data-bs-toggle="list">
                        <i class="fas fa-tasks me-2"></i>迁移任务
                    </a>
                    <a href="#troubleshooting" class="list-group-item list-group-item-action" data-bs-toggle="list">
                        <i class="fas fa-wrench me-2"></i>故障排除
                    </a>
                    <a href="#faq" class="list-group-item list-group-item-action" data-bs-toggle="list">
                        <i class="fas fa-question-circle me-2"></i>常见问题
                    </a>
                </div>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="col-md-9">
            <div class="tab-content">
                <!-- 概述 -->
                <div class="tab-pane fade show active" id="overview">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-info-circle me-2"></i>概述</h5>
                        </div>
                        <div class="card-body">
                            <h2>Oracle到PolarDB-PG迁移平台</h2>
                            <p>本平台提供了从Oracle数据库迁移到PolarDB-PG的完整解决方案。支持以下功能：</p>
                            <ul>
                                <li>表结构和数据迁移</li>
                                <li>视图迁移</li>
                                <li>物化视图迁移</li>
                                <li>存储过程和函数迁移</li>
                                <li>批量迁移功能</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 快速开始 -->
                <div class="tab-pane fade" id="getting-started">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-play me-2"></i>快速开始</h5>
                        </div>
                        <div class="card-body">
                            <h3>基本步骤</h3>
                            <ol>
                                <li>配置源Oracle数据库连接</li>
                                <li>配置目标PolarDB-PG数据库连接</li>
                                <li>创建迁移任务</li>
                                <li>执行迁移</li>
                                <li>验证迁移结果</li>
                            </ol>
                        </div>
                    </div>
                </div>

                <!-- 数据库连接 -->
                <div class="tab-pane fade" id="database-connection">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-database me-2"></i>数据库连接</h5>
                        </div>
                        <div class="card-body">
                            <h3>Oracle数据库连接</h3>
                            <p>配置Oracle数据库连接需要以下信息：</p>
                            <ul>
                                <li>主机名或IP地址</li>
                                <li>端口号（默认1521）</li>
                                <li>服务名</li>
                                <li>用户名</li>
                                <li>密码</li>
                            </ul>

                            <h3 class="mt-4">PolarDB-PG数据库连接</h3>
                            <p>配置PolarDB-PG数据库连接需要以下信息：</p>
                            <ul>
                                <li>主机名或IP地址</li>
                                <li>端口号（默认5432）</li>
                                <li>数据库名</li>
                                <li>用户名</li>
                                <li>密码</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 迁移任务 -->
                <div class="tab-pane fade" id="migration-tasks">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-tasks me-2"></i>迁移任务</h5>
                        </div>
                        <div class="card-body">
                            <h3>支持的迁移类型</h3>
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>迁移类型</th>
                                            <th>说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>表迁移</td>
                                            <td>迁移表结构和数据，包括主键、索引等</td>
                                        </tr>
                                        <tr>
                                            <td>视图迁移</td>
                                            <td>转换并迁移视图定义</td>
                                        </tr>
                                        <tr>
                                            <td>物化视图迁移</td>
                                            <td>转换并迁移物化视图定义和数据</td>
                                        </tr>
                                        <tr>
                                            <td>存储过程迁移</td>
                                            <td>转换并迁移PL/SQL存储过程</td>
                                        </tr>
                                        <tr>
                                            <td>批量迁移</td>
                                            <td>批量迁移指定schema下的所有表</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 故障排除 -->
                <div class="tab-pane fade" id="troubleshooting">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-wrench me-2"></i>故障排除</h5>
                        </div>
                        <div class="card-body">
                            <h3>常见问题处理</h3>
                            <div class="accordion" id="troubleshootingAccordion">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#problem1">
                                            数据库连接失败
                                        </button>
                                    </h2>
                                    <div id="problem1" class="accordion-collapse collapse show" data-bs-parent="#troubleshootingAccordion">
                                        <div class="accordion-body">
                                            <ol>
                                                <li>检查网络连接是否正常</li>
                                                <li>验证数据库服务是否运行</li>
                                                <li>确认连接信息是否正确</li>
                                                <li>检查防火墙设置</li>
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#problem2">
                                            迁移任务执行失败
                                        </button>
                                    </h2>
                                    <div id="problem2" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
                                        <div class="accordion-body">
                                            <ol>
                                                <li>查看任务日志了解具体错误信息</li>
                                                <li>检查源表和目标表的权限设置</li>
                                                <li>验证数据类型映射是否正确</li>
                                                <li>确认目标数据库空间是否充足</li>
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 常见问题 -->
                <div class="tab-pane fade" id="faq">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-question-circle me-2"></i>常见问题</h5>
                        </div>
                        <div class="card-body">
                            <div class="accordion" id="faqAccordion">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                            支持哪些Oracle版本？
                                        </button>
                                    </h2>
                                    <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                        <div class="accordion-body">
                                            本平台支持Oracle 11g及以上版本。
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                            如何处理大表迁移？
                                        </button>
                                    </h2>
                                    <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                        <div class="accordion-body">
                                            对于大表迁移，平台采用分批处理策略，每批处理固定数量的数据，以避免内存溢出。同时，您可以通过监控页面查看迁移进度。
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 激活当前hash对应的标签页
    const hash = window.location.hash || '#overview';
    const tab = document.querySelector(`a[href="${hash}"]`);
    if (tab) {
        tab.click();
    }

    // 更新URL hash当标签页改变时
    const tabLinks = document.querySelectorAll('.list-group-item');
    tabLinks.forEach(link => {
        link.addEventListener('shown.bs.tab', function(event) {
            window.location.hash = event.target.hash;
        });
    });
});
</script>
{% endblock %} 